<template>
	<view class="content">
		<view><wyb-drop-down ref="dropDown" :options="options"></wyb-drop-down></view>

		<view class="list" @click="estat">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="item-image">
					<image :src="item.thumb" mode="widthFix"></image>
				</view>
				<view>
					<view class="item-title">{{item.name}}</view>
					<view class="item-content">{{item.area.name}}/{{item.style.name}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import wybDropDown from '@/components/wyb-drop-down/wyb-drop-down.vue';

	export default {
		data() {
			return {
				list:[],
				options: [{
						header: '区域',
						contents: ['芙蓉区', '天心区', '岳麓区', '开福区', '雨花区', '望城区', '浏阳市', '宁乡市', '长沙县']
					},
					{
						header: '风格',
						contents: ['恬淡田园风格', '新中式风格装修', '现代简约风格', '欧式古典风格', '地中海风格', '东南亚风格']
					},
					{
						header: '户型',
						contents: ['115m²', '120m²', '135m²', '140m²']
					}
				]
			};
		},
		components: {
			wybDropDown
		},
		onLoad() {
			uni.request({
						url: 'https://baiyi.kent.work/api/v1/system/getBuildList',
						method: 'post',
						data: {
							"page": 1,
							"limit": 10,
							"style": 0,
							"area": 0, 
							"model": 0},
							success: res => {
								console.log(res);
								this.list = res.data.data.list
							}
						})
				},
				methods: {
					estat() {
						uni.navigateTo({
							url: '/pages/project/project',
						});
					}
				}
		};
</script>

<style lang="less" scoped>
	/deep/ .wyb-drop-down-content-item-label{
		display: flex;
		justify-content: center !important;
		flex-direction: row;
		text-align: center !important;
		align-items: center !important;
	}
	.content {
		padding-top: 96rpx;

		.list {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 22rpx;
			padding: 22rpx;

			.item {
				background: #ffffff;
				border-radius: 12rpx;
				box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.1);

				.item-image {
					width: 100%;

					image {
						border-radius: 12rpx 12rpx 0 0;
						display: block;
						width: 100%;
					}
				}

				.item-title {
					font-size: 24rpx;
					margin-top: 16rpx;
					margin-left: 20rpx;
				}

				.item-content {
					font-size: 20rpx;
					color: #666666;
					margin-left: 20rpx;
					margin-bottom: 12rpx;
				}
			}
		}
	}
</style>